// import React from "react";
import "./index.scss";
import rich from "../../assets/有钱.png";
import invitation from "../../assets/邀请函.png";
import hand from "../../assets/携手共赢.png";
import form from "../../assets/表单.png";
import video from '../../assets/视频.png'
import PropTypes from "prop-types";
import { Button, Tag } from "antd";
// 封装单个作品Item组件
const WorkItem = ({ item }) => {
  return (
    <div className="content-item">
      <div className="content-image">
        {item.type === "海报" && <img src={item.img} />}
        {item.type === "互动" && <img src={rich} alt="未发布" />}
        {item.type === "长页" && <img src={invitation} alt="未发布" /> }
        {item.type === "H5" && <img src={hand} />}
        {item.type === "表单" && <img src={form} alt="表单" />}
        {item.type === "视频" && <img src={video} alt="视频" /> }
        {item.type === "电子画册" && <img style={{width:'200px',height:'200px',margin:'10px'}} src={item.img}/>}
      </div>
      <div className="content-info">
        <Tag bordered={false} color="purple">
          {item.type || "未分类"}
        </Tag>
        <br />
        <p className="content-name">{item.name}</p>
        <p className="content-date">{item.date}</p>
        {item.views && <span className="content-views">{item.views}</span>}
        {item.visitors && (
          <span className="content-visitors">{item.visitors}</span>
        )}
        {item.forms && <span className="content-forms">{item.forms}</span>}
        {item.size && <span className="content-size">{item.size}</span>}
        {item.content && <Button color="primary" variant="outlined">{item.content}</Button>}
        {item.create && <Button type="primary">{item.create}</Button>}
      </div>
    </div>
  );
};
WorkItem.propTypes = {
  item: PropTypes.shape({
    type: PropTypes.string,
    name: PropTypes.string.isRequired,
    date: PropTypes.string.isRequired,
    size: PropTypes.string,
    views: PropTypes.string,
    visitors: PropTypes.string,
    forms: PropTypes.string,
    img: PropTypes.string, // 添加 img 属性并设为非必填
    content: PropTypes.string,
    create: PropTypes.string,
  }).isRequired,
};

export default WorkItem;